<template>
    <div style="margin-left: 20px">
        <el-row>
            <el-col :span="6">
                <span>项目编号：{{ projectInfo.projectCode }}</span>
            </el-col>
            <el-col :span="6">
                <span>项目名称：{{ projectInfo.projectName  }}</span>
            </el-col>
            <el-col :span="6">
                <span>采购类别：{{ projectInfo.categoryName }}</span>
            </el-col>
            <el-col :span="6">
                <span>预算金额：{{ projectInfo.budget }}元</span>
            </el-col>
            <!--采购小组人员名单-->
            <el-col :span="24">
                <div style="margin-top: 20px">
                    <span>采购小组人员名单</span>
                    <el-button v-if="projectInfo.isSubmit == 0" size="small" type="primary" style="margin-left: 10px;width: 80px;float: right" @click="createShoppingPeople">+</el-button>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px" v-if="true">
                    <el-table
                            :data="shoppingUserList"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="purchaseGroupUsername"
                                min-width="150px"
                                label="姓名"
                        >
                            <template slot-scope="scope">
                               <el-input clearable v-if="!scope.row.purchaseGroupUsername"  v-model="shoppingPeople.purchaseGroupUsername"></el-input>
                               <span v-else>{{ scope.row.purchaseGroupUsername }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="duty"
                                min-width="150px"
                                label="职务"
                        >
                            <template slot-scope="scope">
                                <el-input clearable v-if="!scope.row.duty"  v-model="shoppingPeople.duty"></el-input>
                                <span v-else>{{ scope.row.duty }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="professionalTitle"
                                min-width="150px"
                                label="职称">
                            <template slot-scope="scope">
                                <el-input clearable v-if="!scope.row.professionalTitle"  v-model="shoppingPeople.professionalTitle"></el-input>
                                <span v-else>{{ scope.row.professionalTitle }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="telephone"
                                min-width="150px"
                                label="联系电话">
                            <template slot-scope="scope">
                                <el-input clearable v-if="!scope.row.telephone"  v-model="shoppingPeople.telephone"></el-input>
                                <span v-else>{{ scope.row.telephone }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                                v-if="projectInfo.isSubmit == 0"
                        >
                            <template slot-scope="{$index,row}">
                                <el-button v-if="row.id" type="text" style="text-align: center;margin-left: 7px;color: red"  @click="delPurchaseUSer(row)">删除</el-button>
<!--                                <el-button v-if="row.id" type="text" style="text-align: center;margin-left: 7px;"  @click="updateRow($index)">编辑</el-button>-->
                                <el-button v-if="!row.id" type="text" style="text-align: center;margin-left: 7px" @click="addPurchaseUser">保存</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </el-col>
            <!--生成成果报告-->
            <el-col :span="24">
                <div style="margin-top: 20px">
                    <el-button type="primary" size="small" @click="createPurchaseReportFile" :disabled="projectInfo.isSubmit == 1">生成结果报告</el-button>
                    <span style="margin-left: 10px;color: red;font-size: 10px" v-if="projectInfo.isSubmit === 1">成交合同审批已提交，无法更改</span>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px" v-if="true">
                    <el-table
                            :data="purchaseReportFile"
                            border
                            style="width: 50%">

                        <el-table-column
                                prop="generateTime"
                                min-width="130px"
                                label="生成时间">
                        </el-table-column>
                        <el-table-column
                                prop="filename"
                                min-width="170px"
                                label="文件名">
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                        >
                            <template slot-scope="{$index,row}">
                                <el-button type="text" style="text-align: center;margin-left: 7px" @click="downPurchaseReportFile(row)">下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="24">
                <div>
                    <template v-if="projectInfo.isArchive === 0">
                        <span>上传结果报告</span>
                        <upload-file  hint="只能上传pdf文件，且不超过200Mb" button-name="上传盖章后的成果报告文件" file-suffix=".pdf" :is-query="true"
                                     :upload-url="uploadPath" :query-click="getAllReportSignedFileTableList"></upload-file>
                    </template>
                    <template v-if="projectInfo.isArchive === 1">
                        <span>盖章后结果报告文件</span>
                    </template>
                    <div style="margin-top: 10px;margin-bottom: 10px">
                        <el-table
                            :data="reportSignedTableList"
                            border
                            style="width: 50%">

                            <el-table-column
                                prop="generateTime"
                                min-width="130px"
                                label="上传时间">
                            </el-table-column>
                            <el-table-column
                                prop="filename"
                                min-width="170px"
                                label="通知书名称">
                            </el-table-column>
                            <el-table-column
                                width="120px"
                                label="操作"
                            >
                                <template slot-scope="{$index,row}">
                                    <el-button type="text" style="text-align: center;margin-left: 7px"
                                               @click="downReportSignedFile(row)">下载
                                    </el-button>
                                    <el-button  v-if="projectInfo.isArchive === 0" type="text" style="text-align: center; color: red; margin-left: 7px"
                                               @click="deleteReportSignedFile(row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    addShoppingUser,
    createReportFile,
    deletePurchaseUser, deleteReportSigned,
    downReportFile, downReportSigned, getAllPurchaseReport, getAllReportSigned,
    getAllShoppingUser
} from "@/api/shopping/reportManage";
import downloadFile from "@/utils/downloadFile";
import UploadFile from "@/components/uploadFile/index.vue";
import {deletePurchaseSigned} from "@/api/shopping/purchaseFileApi";
import {serverIp} from "../../../public/config";

export default {
    components: {UploadFile},
    props: {
        projectInfo: {
            type: Object,
            default() {
                return {}
            }
        },
        shoppingUserList: {
            type: [],
            default() {
                return [];
            }
        },
        purchaseReportFile: {
            type: [],
            default() {
              return [];
            }
        },
        reportSignedParentTableList:{
            type: [],
            default() {
                return [];
            }
        },
        required: true
    },
    data(){
        return {
            shoppingUserList:[],
            project: {},
            shoppingPeople:{
                purchaseGroupUsername:"",
                duty: "",
                professionalTitle: "",
                telephone: "",
                projectId: "",
            },
            purchaseReportFile: [],
            uploadPath: `${serverIp}/purchaseReportSigned/upload/purchaseReportSigned/${this.projectInfo.projectId}`, // 上传地址
            reportSignedTableList:[], // 盖章文件列表
        }
    },
    mounted() {
        this.project = this.projectInfo
    },
    watch: {
        projectInfo: {
            // 监听数据发生变化的处理函数
            handler(newV) {
                this.project = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        },
        reportSignedParentTableList: {
            handler(newV){
                this.reportSignedTableList = JSON.parse(JSON.stringify(newV));
            },
            deep: true
        }
    },
    methods: {
        rowClassName({ row, rowIndex }){

        },
        createShoppingPeople(){
            if (this.shoppingUserList === undefined) {
                this.shoppingUserList = [];
            }
            let item = this.shoppingUserList[this.shoppingUserList.length - 1];
            if (JSON.stringify(item) === "{}"){
                this.$message.info("请先保存在添加下一个对象")
            }else {
                this.shoppingUserList.push({});
            }
        },
        // 添加采购小组人员成功
        async addPurchaseUser(){
            try {
                this.shoppingPeople.projectId = this.project.projectId;
                let res = await addShoppingUser(this.shoppingPeople);
                if (res.data.code === 200) {
                    this.$message.success("添加采购小组人员成功")
                    Object.keys(this.shoppingPeople).forEach(key => (this.shoppingPeople[key] = ''))
                    await this.getPurchaseUserList(this.project.projectId)
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 获得采购人员小组
        async getPurchaseUserList(data){
            try {
                let res = await getAllShoppingUser(data)
                if (res.data.code === 200) {
                    this.shoppingUserList = res.data.data;
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 删除采购人员小组
        async delPurchaseUSer(row){
            try {
                let res = await deletePurchaseUser(row.id)
                if (res.data.code === 200) {
                    this.$message.success("删除成功!!")
                    await this.getPurchaseUserList(this.project.projectId)
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 下载成果报告文件
        async downPurchaseReportFile(row){
            let res = await downReportFile(row.id)
            downloadFile(res,row.filename)
        },
        // 生成成果报告
        async createPurchaseReportFile(){
            let res = await createReportFile(this.project.projectId)
            console.log(res.data)
            if (res.data.code === 200) {
                this.$message.success("生成成功")
                await this.getAllPurchaseReportFile(this.project.projectId)
            } else {
                this.$message.error(res.data.msg)
            }
        },
        // 获得所有采购报告
        async getAllPurchaseReportFile(data){
            try {
                let res = await getAllPurchaseReport(data);
                if (res.data.code == 200) {
                    this.purchaseReportFile = res.data.data;
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error("获取数据失败")
            }
        },
        // 获得所有结果报告盖章文件
        async getAllReportSignedFileTableList(){
            this.$loading({
                fullscreen: true,
            });
            try {
                let res = await getAllReportSigned(this.projectInfo.projectId)
                if (res.data.code === 200) {
                    this.$message.success("成功")
                    this.reportSignedTableList = res.data.data;
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            } finally {
                this.$loading().close();
            }
        },

        // 下载结果报告盖章文件
        async downReportSignedFile(row){
            this.$message.success("正在拼命下载请稍后")
            let res = await downReportSigned(row.id)
            downloadFile(res, row.filename)
            // this.$loading({
            //     fullscreen: true,
            // });
            // try {
            //
            // } catch (e) {
            //     this.$message.error(e.messages)
            // } finally {
            //     this.$loading().close();
            // }
        },
        // 删除结果报告盖章文件
        async deleteReportSignedFile(row){
            this.$loading({
                fullscreen: true,
            });
            try {
                let res = await deleteReportSigned(row.id)
                if (res.data.code === 200) {
                    this.$message.success("成功")
                    await this.getAllReportSignedFileTableList()
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e.messages)
            } finally {
                this.$loading().close();
            }
        },
        // 修改
        updateRow(index){
            console.log("查看序列号",index);
            Object.keys(this.shoppingUserList[index]).forEach(key => {
                this.shoppingPeople[key] = this.shoppingUserList[index][key]
                this.shoppingUserList[index][key] = ''
            })
            console.log("查看对应的对象值",this.shoppingPeople)
        }
    }
}
</script>
<style scoped>

</style>
